<template>
  <div>
    <!--头部-->
    <Header @scrollTitle="scrollTitle" :chooseValue="1"></Header>
    <div class="jqgk" style="background: #fff5e0">
      <div class="contai" style="max-width:1197px">
        <div class="top_tit">
          <span class="titleFont" v-if="pcshow" id="headline">History</span>
          <span class="titleFont" v-if="!pcshow" style="font-size:36px" id="headline">History</span>
        </div>
        <!-- pc端 -->
        <div v-if="pcshow" style="margin-top: 94px">
          <div class="container-fluid">
            <div class="col-md-12">
              <div class="row">
                <div class="timeline">
                  <a-spin :spinning="spinning" :delay="delayTime">
                    <span class="timeline-label">
                      <div class="timeline-point timeline-point-blank">
                        <img
                          src="../assets/xqsimage/jialogo.png"
                          style="width:91px;height:91px;margin-top:-20px"
                        />
                      </div>
                    </span>
                    <span class="timeline-label" style="height:52px"> </span>

                    <div v-for="(item, index) in dataList" :key="item.id">
                      <span class="timeline-label" v-if="item.type == 1">
                        <div class="timeline-point timeline-point-blank">
                          <div class="timeAxis">{{ item.sort }}</div>
                        </div>
                      </span>
                      <!-- 右边 -->
                      <div
                        class="timeline-item timeline-item-right"
                        v-if="index % 2 == 0"
                      >
                        <div class="timeline-point timeline-point-blank">
                          <span class="timeStyleRight" v-if="pcshow">{{
                            item.title
                          }}</span>
                        </div>
                        <span class="timeStyleLeftMobile" v-if="!pcshow">{{
                          item.title
                        }}</span>
                        <div class="timelineText">
                          {{ item.details }}
                        </div>
                      </div>
                      <!-- 左边 -->
                      <div
                        class="timeline-item timeline-item-left"
                        v-if="index % 2 == 1"
                      >
                        <div class="timeline-point timeline-point-blank">
                          <span class="timeStyleLeft" v-if="pcshow">
                            {{ item.title }}</span
                          >
                        </div>
                        <span class="timeStyleLeftMobile" v-if="!pcshow">{{
                          item.title
                        }}</span>
                        <div class="timelineText">
                          {{ item.details }}
                        </div>
                      </div>
                    </div>
                  </a-spin>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 移动端 -->
        <div v-if="!pcshow" style="margin-left:20px;margin-right:20px">
          <div style="text-align:center;width:100%;margin-left:0.5px">
            <img
              src="../assets/xqsimage/jialogo.png"
              style="width:35px;height:35px;"
            />
          </div>
          <div style=";width:50.5%">
            <div style="height: 40px;border-right: 2px solid #888;"></div>
          </div>
           <a-spin :spinning="spinning" :delay="delayTime">
          <div v-for="(item, index) in dataList" :key="item.id">
            <span v-if="item.type == 1">
              <div>
                <div class="timeAxisForP">{{ item.sort }}</div>
              </div>
            </span>

            <div class="mobileStylea">
              <div style="width:50%;display:table;">
                <div v-if="index % 2 == 0" class="mobileStyleb">
                  {{ item.title }}
                </div>
                <div v-if="index % 2 == 1" class="mobileStylec">
                  {{ item.details }}
                </div>
              </div>

              <div style="width:50%;;border-left:2px solid #888">
                <div class="mobileStyled" v-if="index % 2 == 0">
                  {{ item.details }}
                </div>
                <div class="mobileStylee" v-if="index % 2 == 1">
                  <div>{{ item.title }}</div>
                </div>
              </div>
            </div>
          </div>
           </a-spin>
        </div>
      </div>
    </div>
    <!-- 底部 -->
    <Footer></Footer>
  </div>
</template>

<script>
import Header from "./header";
import Footer from "./footer";
import { getHistoryList } from "../request/api";
export default {
  components: { Header, Footer },
  data() {
    return {
      dataList: [],
      pcshow: false,
      choseValue: 2,
      spinning: true,
      delayTime: 500,
      styletable: { borderBottom: "8px solid #F2DCCA", paddingLeft: "0px" },
      mapStyle: {
        background: "#f2dcca",
        marginTop: "5px",
        paddingLeft: "39px"
      }
    };
  },
  beforeCreate() {},
  created() {
    if (this._isMobile()) {
      this.pcshow = false;
    } else {
      this.pcshow = true;
    }
  },
  mounted() {
    this.getHistoryListFunction();
  },
  methods: {
    //数据获取
    getHistoryListFunction() {
      getHistoryList(this.HOST)
        .then(response => {
          this.spinning = true;
          let arr = response.data;
          let lndexList = "";
          arr.length > 0 ? (lndexList = arr[0].sort) : "";
          for (let i = 0; i < arr.length; i++) {
            arr[0].type = 1;
            if (arr[i].sort == lndexList) {
              if (i != 0) {
                arr[i].type = 0;
              }
            } else {
              lndexList = arr[i].sort;
              arr[i].type = 1;
            }
          }
          this.dataList = arr;
          this.spinning = false;
        })
        .catch(error => {});
    },
    //菜单选择
    tabSelect(e) {
      let value = e.target.dataset.index;
      this.choseValue = value;
    },
    //判断是PC端还是手机端
    _isMobile() {
      let flag = navigator.userAgent.match(
        /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
      );
      return flag;
    },
    //描点跳转
    scrollTitle() {
      var PageId = document.querySelector("#headline");
      window.scrollTo({
        top: PageId.offsetTop - 40,
        behavior: "smooth"
      });
    }
  }
};
</script>

<style>
.titleFont {
  font-size: 42px;
  font-family: "Microsoft YaHei";
  font-weight: 400;
  color: #840207;
  line-height: 36px;
}
.timeAxis {
  width: 91px;
  height: 36px;
  background: #ffffff;
  border: 2px solid #840207;
  border-radius: 17px;
  position: relative;
  margin-bottom: 20px;
  margin-left: auto;
  margin-right: auto;
  color: #840207;
  font-size: 18px;
  font-family: "Arial";
  font-weight: bold;
  color: #840207;
  line-height: 36px;
}
.timelineText {
  background: #fff5e0;
  border: 1px solid #e1dcd3;
  font-size: 20px;
  font-family: "Source Han Sans CN";
  font-weight: bold;
  color: #161616;
  text-align: left;
  padding: 12px 20px 13px 9px;
  border-radius: 10px;
}


.timeStyleLeft {
  text-align: left;
  width: 156px;
  height: 18px;
  font-size: 24px;
  font-family: Arial;
  font-weight: 400;
  font-style: italic;
  color: #8c8c8c;
  /* float: left; */
  margin-top: -5px;
  position: absolute;
  z-index: 999;
  left: 25px;
}
.timeStyleLeftMobile {
  width: 156px;
  height: 18px;
  font-size: 24px;
  font-family: Arial;
  font-weight: 400;
  font-style: italic;
  color: #8c8c8c;

  /* float: left; */
}
.timeStyleRight {
  width: 156px;
  height: 18px;
  font-size: 24px;
  font-family: Arial;
  font-weight: 400;
  font-style: italic;
  color: #8c8c8c;
  /* float: right; */
  margin-top: -5px;
  position: absolute;
  z-index: 111;
  right: 30px;
  text-align: right;
}
.mobileStylea {
  width: 100%;
  display: flex;
  flex-direction: row;
  font-size: 12px;
  font-family: "Microsoft YaHei";
}
.mobileStyleb {
  text-align: right;
  vertical-align: middle;
  margin-right: 8px;
  font-family: Arial;
  font-weight: 400;
  font-style: italic;
  color: #8c8c8c;
}
.mobileStylec {
  text-align: left;
  background: #FFF5E0;
  padding: 5px;
  margin-right: 8px;
  border-radius: 10%;
  color: #161616;
  font-weight: 600;
  border: 1px solid #C7C7C7;
}
.mobileStyled {
  text-align: left;
  background: #FFF5E0;
  padding: 5px;
  margin-left: 8px;
  border-radius: 10%;
  color: #161616;
  font-weight: 600;
  border: 1px solid #C7C7C7;
}
.mobileStylee {
  text-align: left;
  margin-left: 8px;
  font-family: Arial;
  font-weight: 400;
  font-style: italic;
  color: #8c8c8c;
  display: flex;
  align-items: center;
}
.timeAxisForP{
  width: 55px;
  height: 25px;
  background: #ffffff;
  border: 2px solid #840207;
  border-radius: 17px;
  position: relative;
  /* margin-bottom: 20px; */
  margin-left: auto;
  margin-right: auto;
  color: #840207;
  font-size: 16px;
  font-family: "Arial";
  font-weight: bold;
  color: #840207;
  line-height: 25px;
}
</style>
